<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>

    <!-- 嘤嘤嘤，前天的任务拖到今天才能完成； -->
    <!-- 上午4h -->

    <!-- 8-9 -->
    <h1>组合器 伪类 为元素</h1>
    <div class="weilei">把鼠标移到我上面</div>


    <div class="weilei2">鼠标移到我上面来显示 p 元素
        <p>哈哈！我在这里！</p>
    </div>


    <p>这是一段文本。</p>
    <p>这是一段文本。</p>


    <p>我是一个<i>强壮</i>的男人。我是一个<i>强壮</i>的男人。</p>

    <p>我是一个<i>强壮</i>的男人。我是一个<i>强壮</i>的男人。</p>


    <p>Some text <q lang="en">A quote in a paragraph</q> Some text.</p>
    <form action="https://www.baidu.com" method="get">
        First name: <input type="text" name="fname"><br>
        Last name: <input type="text" name="lname"><br>
        <input type="submit" value="Submit" id="">
    </form>

    <p class="first-line">您可以使用 ::first-line
        伪元素将特殊效果添加到文本的第一行。一些更多的文字。越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多。</p>


    <h2>这是一个标题</h2>
    <p>::before 伪元素在一个元素的内容之前插入内容。</p>
    <h2>这是一个标题</h2>

    <p class="selection">这是一个段落。</p>
    <div class="selection">这是 div 元素中的文本。</div>


    <h1>不透明度</h1>
    <p>opacity与hover 不透明度和hover一同使用</p>
    <img src="../images/绿草茵茵.jpg" alt="" width="170" height="170" class="opacity">
    <img src="../images/翱翔天际.jpg" alt="" width="170" height="170" class="opacity">
    <img src="../images/鲜花盛开.jpg" alt="" width="170" height="170" class="opacity">

    <div class="first four">
        <p>opacity 0.1</p>
    </div>
    <div class="second four">
        <p>opacity 0.3</p>
    </div>
    <div class=" four third">
        <p>opacity 0.6</p>
    </div>
    <div class="four">
        <p>opacity 1 (default)</p>
    </div>


    <div class="background">
        <div class="transbox">
            <p>这段文本被放置在一个透明框中。</p>
        </div>
    </div>

    <!-- 9-10 -->
    <h1>导航栏 垂直 水平导航栏</h1>
    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>

    <h1>下拉菜单</h1>

    <!-- 10-11 -->
    <h1>图片 库 精灵</h1>
    <h1>属性选择器</h1>
    <h1>表单</h1>

    <!-- 11-12 -->
    <h1>计数器</h1>
    <h1>网站布局</h1>
    <h1>单位 特异性</h1>

    <!-- css3高级教程 -->
    <!-- 14-15 -->
    <h1>圆角，边框图像，背景</h1>

    <h1>颜色 渐变 径向渐变</h1>

    <h1>阴影 box-shadow 文本效果</h1>

    <h1>网络字体 2D转换 3D转换</h1>

    <!-- 19-20 -->
    <h1>过渡 动画 工具提示 </h1>
    <!-- 20-21 -->
    <h1>图像样式 fit 按钮</h1>
    <!-- 21-22 -->
    <h1>分页 多列 用户界面</h1>
    <!-- 22-23 -->
    <h1>变量 覆盖变量 js 媒体查询</h1>
    <!-- 23-24 -->
    <h1>box sizing</h1>
    <h1>flexbox 媒体查询 例子</h1>

    <!-- 
     18-19 休息1H
     19-20 奖励自己跳操一小时
     20-21 洗澡
     21-22：30 看英语 1h 30min
     22:30-23:00 30min 看书睡觉 -->


</body>

</html>